<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tack表管理 - 测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .header h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .header p {
            color: #666;
            font-size: 14px;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin-bottom: 20px;
        }

        .card h2 {
            color: #333;
            font-size: 20px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            color: #333;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
        }

        .btn-success {
            background: #10b981;
            color: white;
        }

        .btn-success:hover {
            background: #059669;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background: #dc2626;
        }

        .btn-warning {
            background: #f59e0b;
            color: white;
        }

        .btn-warning:hover {
            background: #d97706;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        thead {
            background: #f8f9fa;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        th {
            color: #374151;
            font-weight: 600;
            font-size: 14px;
        }

        td {
            color: #6b7280;
            font-size: 14px;
        }

        tbody tr:hover {
            background: #f9fafb;
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .badge-open {
            background: #d1fae5;
            color: #065f46;
        }

        .badge-closed {
            background: #fee2e2;
            color: #991b1b;
        }

        .actions {
            display: flex;
            gap: 10px;
        }

        .message {
            padding: 12px 20px;
            border-radius: 5px;
            margin-bottom: 20px;
            display: none;
        }

        .message.success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #10b981;
        }

        .message.error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #ef4444;
        }

        .message.show {
            display: block;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #9ca3af;
        }

        .empty-state svg {
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .card {
                padding: 20px;
            }

            table {
                font-size: 12px;
            }

            th, td {
                padding: 10px 5px;
            }

            .actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔧 Tack表管理</h1>
            <p>管理系统配置参数</p>
        </div>

        <div id="message" class="message"></div>

        <!-- 添加/编辑表单 -->
        <div class="card">
            <h2 id="form-title">添加/更新记录</h2>
            <form id="tackForm">
                <div class="form-group">
                    <label for="times">Times (次数)</label>
                    <input type="number" id="times" name="times" required min="0" placeholder="请输入次数">
                </div>
                <div class="form-group">
                    <label for="intervals">Intervals (间隔)</label>
                    <input type="number" id="intervals" name="intervals" required min="0" placeholder="请输入间隔">
                </div>
                <div class="form-group">
                    <label for="state">State (状态)</label>
                    <select id="state" name="state" required>
                        <option value="">请选择状态</option>
                        <option value="open">Open (开启)</option>
                        <option value="closed">Closed (关闭)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="pc_state">PC State (PC状态)</label>
                    <select id="pc_state" name="pc_state" required>
                        <option value="">请选择PC状态</option>
                        <option value="run" selected>Run (运行)</option>
                        <option value="stop">Stop (停止)</option>
                    </select>
                </div>
                <div class="actions">
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <span id="submitText">保存记录</span>
                    </button>
                    <button type="button" class="btn btn-warning" id="cancelBtn" style="display: none;">取消编辑</button>
                </div>
            </form>
        </div>

        <!-- 数据列表 -->
        <div class="card">
            <h2>数据列表</h2>
            <div id="tableContainer">
                <table id="tackTable">
                    <thead>
                        <tr>
                            <th>Times</th>
                            <th>Intervals</th>
                            <th>State</th>
                            <th>PC State</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tackTableBody">
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 显示消息
        function showMessage(text, type = 'success') {
            const messageEl = document.getElementById('message');
            messageEl.textContent = text;
            messageEl.className = `message ${type} show`;
            setTimeout(() => {
                messageEl.classList.remove('show');
            }, 3000);
        }

        // 加载数据
        async function loadData() {
            try {
                const response = await fetch('/api/test/tack');
                const data = await response.json();
                
                if (data.success) {
                    renderTable(data.data);
                } else {
                    showMessage(data.message || '加载数据失败', 'error');
                }
            } catch (error) {
                console.error('加载数据失败:', error);
                showMessage('加载数据失败: ' + error.message, 'error');
            }
        }

        // 渲染表格
        function renderTable(data) {
            const tbody = document.getElementById('tackTableBody');
            
            if (!data || data.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="5" class="empty-state">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                            </svg>
                            <p>暂无数据</p>
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = data.map((item, index) => `
                <tr>
                    <td>${item.times}</td>
                    <td>${item.intervals}</td>
                    <td>
                        <span class="badge badge-${item.state === 'open' ? 'open' : 'closed'}">
                            ${item.state === 'open' ? 'Open' : 'Closed'}
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-${item.pc_state === 'run' ? 'open' : 'closed'}">
                            ${item.pc_state === 'run' ? 'Run' : 'Stop'}
                        </span>
                    </td>
                    <td>
                        <div class="actions">
                            <button class="btn btn-success" onclick="editRecord()">编辑</button>
                            <button class="btn btn-danger" onclick="clearTable()">清空</button>
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        // 提交表单
        document.getElementById('tackForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = {
                times: parseInt(document.getElementById('times').value),
                intervals: parseInt(document.getElementById('intervals').value),
                state: document.getElementById('state').value,
                pc_state: document.getElementById('pc_state').value
            };

            try {
                // 总是使用POST，后端会自动判断是插入还是更新
                const response = await fetch('/api/test/tack', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                const data = await response.json();
                
                if (data.success) {
                    showMessage(data.message, 'success');
                    resetForm();
                    loadData();
                } else {
                    showMessage(data.message || '操作失败', 'error');
                }
            } catch (error) {
                console.error('提交失败:', error);
                showMessage('提交失败: ' + error.message, 'error');
            }
        });

        // 编辑记录
        async function editRecord() {
            try {
                const response = await fetch('/api/test/tack/first');
                const data = await response.json();
                
                if (data.success) {
                    const record = data.data;
                    document.getElementById('times').value = record.times;
                    document.getElementById('intervals').value = record.intervals;
                    document.getElementById('state').value = record.state;
                    document.getElementById('pc_state').value = record.pc_state || 'run';
                    
                    document.getElementById('form-title').textContent = '编辑记录';
                    document.getElementById('submitText').textContent = '保存记录';
                    document.getElementById('cancelBtn').style.display = 'block';
                    
                    // 滚动到表单
                    document.getElementById('tackForm').scrollIntoView({ behavior: 'smooth' });
                } else {
                    showMessage(data.message || '获取记录失败', 'error');
                }
            } catch (error) {
                console.error('获取记录失败:', error);
                showMessage('获取记录失败: ' + error.message, 'error');
            }
        }

        // 清空表
        async function clearTable() {
            if (!confirm('确定要清空所有记录吗？')) {
                return;
            }

            try {
                const response = await fetch('/api/test/tack/clear', {
                    method: 'DELETE'
                });

                const data = await response.json();
                
                if (data.success) {
                    showMessage('清空成功', 'success');
                    loadData();
                } else {
                    showMessage(data.message || '清空失败', 'error');
                }
            } catch (error) {
                console.error('清空失败:', error);
                showMessage('清空失败: ' + error.message, 'error');
            }
        }

        // 重置表单
        function resetForm() {
            document.getElementById('tackForm').reset();
            document.getElementById('form-title').textContent = '添加/更新记录';
            document.getElementById('submitText').textContent = '保存记录';
            document.getElementById('cancelBtn').style.display = 'none';
        }

        // 取消编辑
        document.getElementById('cancelBtn').addEventListener('click', resetForm);

        // 页面加载时获取数据
        window.addEventListener('load', loadData);
    </script>
</body>
</html>
